<template>
  <div>
    <el-dialog
      title="考试进行中"
      :visible.sync="dialogVisible"
      width="90%"
      :show-close="false"
      :close-on-click-modal="false">

      <el-card>
        <el-form :model="examinationPaper" status-icon la style="width: 80%;margin: auto">
          <div style="text-align: center">
            <h2 style="font-size: 25px;margin-bottom: 50px;">{{examinationPaper.ep_name}}</h2>
            <p style="font-size: 20px;margin-top: 50px;">{{examinationPaper.ep_describe}}</p>
          </div>
          <div style="margin-top: 30px;margin-bottom: 50px;">
            <div style="float: left">
              剩余<label style="color: #13ce66;font-size: 20px;"> {{testTimeF}} </label>分<label style="color: red"> {{testTimeM}} </label>秒
            </div>
            <div style="float: right">
              <label style="margin-right: 20px;">总分：{{examinationPaper.ep_fraction}}</label>
              <label>时间(分钟)：{{examinationPaper.ep_test_time}}</label>
            </div>
          </div>
          <el-divider></el-divider>
          <template v-for="(obj,index) in examinationPaper.testQuestionsList">
            <div v-if="obj.tq_type == 1">
              <h3 style="margin-bottom: 40px;">{{index+1}}. 单选题（{{obj.tq_fraction}}分）</h3>
              <div v-for="(item,index) in obj.questionList" style="margin-left: 15px;">
                <div style="margin-bottom: 30px;margin-top: 20px;">{{index+1}}.{{item.ch_title}}</div>
                <el-form-item style="margin-left: 15px;">
                  <el-radio-group v-model="item.chooseAnswerList[0].ca_answer">
                    <div style="margin-bottom: 8px;"><el-radio label="A" value="A">A.<label style="margin-left: 10px;">{{item.ch_choose_A}}</label></el-radio></div>
                    <div style="margin-bottom: 8px;"><el-radio label="B" value="B">B.<label style="margin-left: 10px;">{{item.ch_choose_B}}</label></el-radio></div>
                    <div style="margin-bottom: 8px;"><el-radio label="C" value="C">C.<label style="margin-left: 10px;">{{item.ch_choose_C}}</label></el-radio></div>
                    <div style="margin-bottom: 8px;"><el-radio label="D" value="D">D.<label style="margin-left: 10px;">{{item.ch_choose_D}}</label></el-radio></div>
                  </el-radio-group>
                </el-form-item>
              </div>
            </div>
            <div v-if="obj.tq_type == 2">
              <h3 style="margin-bottom: 40px;">{{index+1}}. 多选题（{{obj.tq_fraction}}分）</h3>
              <div v-for="(item,index) in obj.questionList" style="margin-left: 15px;">
                <div style="margin-bottom: 20px;margin-top: 20px;">{{index+1}}.{{item.ch_title}}</div>
                <el-form-item style="margin-left: 15px;">
                  <el-checkbox-group v-model="item.answerArr">
                    <div style="margin-bottom: -12px;"><el-checkbox label="A" value="A">A.<label style="margin-left: 10px;">{{item.ch_choose_A}}</label></el-checkbox></div>
                    <div style="margin-bottom: -12px;"><el-checkbox label="B" value="B">B.<label style="margin-left: 10px;">{{item.ch_choose_B}}</label></el-checkbox></div>
                    <div style="margin-bottom: -12px;"><el-checkbox label="C" value="C">C.<label style="margin-left: 10px;">{{item.ch_choose_C}}</label></el-checkbox></div>
                    <div style="margin-bottom: -12px;"><el-checkbox label="D" value="D">D.<label style="margin-left: 10px;">{{item.ch_choose_D}}</label></el-checkbox></div>
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </div>
            <div v-if="obj.tq_type == 3">
              <h3 style="margin-bottom: 40px;">{{index+1}}. 判断题（{{obj.tq_fraction}}分）</h3>
              <div v-for="(item,index) in obj.questionList" style="margin-left: 15px;">
                <div style="margin-bottom: 20px;margin-top: 20px;">{{index+1}}.{{item.j_title}}</div>
                <el-form-item style="margin-left: 15px;">
                  <el-radio-group v-model="item.judgmentAnswer.ja_answer">
                    <div style="margin-bottom: 8px;"><el-radio  label="1" value="1">√</el-radio></div>
                    <div style="margin-bottom: 8px;"><el-radio  label="2" value="2">×</el-radio></div>
                  </el-radio-group>
                </el-form-item>
              </div>
            </div>
            <div v-if="obj.tq_type == 4">
              <h3 style="margin-bottom: 40px;">{{index+1}}. 填空题（{{obj.tq_fraction}}分）</h3>
              <div v-for="(item,index) in obj.questionList" style="margin-left: 15px;">
                <div style="margin-bottom: 20px;margin-top: 20px;">{{index+1}}.{{item.fb_title}}</div>
                <div v-for="(v,k) in item.answerArr" :key="k">
                  <el-row style="margin-bottom: 0px;" :span="24">
                    <el-form-item style="margin-bottom: 0px;margin-left: 15px;">
                      <el-col :span="1">
                        {{v.label}}
                      </el-col>
                      <el-col :span="6">
                        <el-input v-model="v.value" size="mini"></el-input>
                      </el-col>
                    </el-form-item>
                  </el-row>
                </div>
              </div>
            </div>
          </template>
          <el-divider></el-divider>
          <div style="text-align: right">出卷时间：{{examinationPaper.ep_time}}</div>
        </el-form>
      </el-card>

      <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="closeDialog">取 消</el-button>
      <el-button size="mini" type="primary" @click="submitTestInfo">提交</el-button>
    </span>
    </el-dialog>
  </div>
</template>
<script>
  import {getExaminationPaperById,getNoAnswerExaminationPaperById,rewinding} from '@/api/invigilate'
  export default{
    props:["isShowStartTestDialog","testInfoObj"],

    created(){
        console.log(this.testInfoObj);
        this.getTestPaperInfo();
    },

    data(){
          return {
              dialogVisible:this.isShowStartTestDialog,
              testTimeF:0,
              testTimeM:0,
              timer:null,
              examinationPaper:{
                ep_name:"",
                ep_describe:"",
                ep_test_time:0,
                ep_fraction:0,
                testQuestionsList:[]
              },
          }
      },

      methods:{
        getTestPaperInfo(){
          getNoAnswerExaminationPaperById({ep_id:this.testInfoObj.ep_id}).then(res=>{
            if(res.code == 200){
              this.assemblyData(res.data);
            }
          })
        },

        assemblyData(data){
            console.log(data);
          for(let obj of data.testQuestionsList){
            if(obj.tq_type == 2) { //多选题
              for(let que of obj.questionList){
                let answer = [];
//                if(que.chooseAnswerList.length > 0){
//                  for(let ans of que.chooseAnswerList){
//                    answer.push(ans.ca_answer)
//                  }
//                }
                que.answerArr = answer;
              }
            }else if(obj.tq_type == 4){ //填空题
              for(let que of obj.questionList){
                let answer = [];
                if(que.fillBanksAnswer.fba_answer != null){
                  answer = que.fillBanksAnswer.fba_answer.split("-");
                }
                let answerArr = [];
                for(let i = 0;i < answer.length;i ++){
                  answerArr.push({label:"空_"+(i+1),value:answer[i]=="*"?"":answer[i]});
                }
                que.answerArr = answerArr;
              }
            }

          }
          this.examinationPaper = data;
          this.testTimeF = data.ep_test_time==0?0:data.ep_test_time - 1;
          this.testTimeM = data.ep_test_time==0?0:60;
          this.startCountDown();
          //console.log(this.examinationPaper);
        },

        closeDialog(){
            this.dialogVisible = false;
            this.$emit("closeDialog","start");
        },

        submitTestInfo(){
            for(let obj of this.examinationPaper.testQuestionsList){
              if(obj.tq_type == 2){ //多选题
                  for(let que of obj.questionList){
                      que.chooseAnswerList = [];
                      for(let ans of que.answerArr){
                        que.chooseAnswerList.push({ca_answer:ans})
                      }
                  }
                }else if(obj.tq_type == 3){ //判断题
                  for(let que of obj.questionList){
                     if(que.judgmentAnswer.ja_answer==null){
                       que.judgmentAnswer.ja_answer = "*";
                     }
                  }
                }else if(obj.tq_type == 4){ //填空题
                   for(let que of obj.questionList){
                       let str = [];
                       for(let ans of que.answerArr){
                            str.push(ans.value.trim().length==0?"*":ans.value.trim());
                       }
                     que.fillBanksAnswer.fba_answer = str.join("-");
                   }
                }

                if(obj.tq_type == 1 || obj.tq_type == 2){
                   obj.chooseList = obj.questionList;
                }else if(obj.tq_type == 3){
                   obj.judgmentList = obj.questionList;
                }else if(obj.tq_type == 4){
                   obj.fillBanksList = obj.questionList;
                }
            }

          this.examinationPaper.rp_id = this.testInfoObj.rp_id;
          rewinding(this.examinationPaper).then(res=>{
              if(res.code === 200){
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.closeDialog();
              }
          })

        },

        startCountDown(){
            let _this = this;
            this.timer = setInterval(function () {
               _this.testTimeM--;
               if(_this.testTimeM == 0){
                 if(_this.testTimeF != 0){
                    _this.testTimeF--;
                   _this.testTimeM = 60;
                 }else{
                   _this.stopCountDown();
                 }
               }
            },1000)
        },

        stopCountDown(){
            clearInterval(this.timer);
            //提交数据
            this.submitTestInfo();
        }

      }


  }
</script>
